<template>
  <div class="release_wrap">
    <div class="release_title">播 放 视 频</div>
    <el-card class="release_card">
      <el-button type="primary" round icon="el-icon-arrow-left" style="margin-bottom: 40px"
        @click="jump_home">返回首页</el-button>

      <el-table stripe :data="tableData" style="width: 100%" height="600px">
        <el-table-column prop="videoName" label="视频名称" min-width="280">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="playVideo(scope.$index, scope.row)">播放</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog :modal="false" title="视频播放" :visible.sync="dialogVisible" width="40%">
      <p class="video_title">{{ videoName }}</p>
      <video :src="`${videoUrl}/${videoId}`" controls="controls" width="100%" @canplay="getVidDur()" id="myvideo"></video>
    </el-dialog>
  </div>
</template>

<script>
import IPconfig from "./IPconfig";
const baseUrl = IPconfig.baseUrl;
var video = () => {
  var videoTime = document.getElementById("myvideo");
  console.log(videoTime.duration); //获取视频时长
  console.log(videoTime.currentTime); //获取视频当前播放时间
};
import { mapState } from "vuex";
export default {
  name: 'VideoPlayAll',
  data() {
    return {
      title: "",
      videolist: "",
      //表格数据
      tableData: [],
      //弹框组件隐藏
      dialogVisible: false,
      //用于保存视频的id
      videoId: 0,
      //保存视频的名称
      videoName: '',
      videoUrl: baseUrl + '/SelectVideo/policemen'
    };
  },
  computed: {
    //引入vuex中state的变量，可以直接this.xxx调用到
    ...mapState(["article"]),
  },
  created() {
    this.getVideoInfo();
  },
  methods: {
    jump_home() {
      this.$router.replace('/')
    },
    getVidDur() {
      video();
    },
    //获取video表格数据
    getVideoInfo() {
      this.$axios.get(baseUrl + "/SelectVideo/table").then((res) => {
        console.log('res:', res)
        this.tableData = res.data;
      });
    },
    //点击播放按钮
    playVideo(i, val) {
      //显示弹框
      this.dialogVisible = true;
      //保存视频名字
      this.videoName = val.videoName;
      //保存视频id
      this.videoId = val.id;
      console.log(i, val);
    },
  },
};
</script>

<style></style>
